<template>
   <div>
     <home-header></home-header>
     <home-swiper :swiperList="swiperList"></home-swiper>
     <home-icons :iconList="iconList"></home-icons>
     <home-recommend :recommendList="recommendList"></home-recommend>
     <home-weekend :weekendList="weekendList"></home-weekend>
   </div>

</template>
<script>
import HomeHeader from './comoponents/header'
import HomeSwiper from './comoponents/swiper'
import HomeIcons from './comoponents/icon'
import HomeRecommend from './comoponents/recommend'
import HomeWeekend from './comoponents/weekend'
import axios from 'axios'
import { mapState } from 'vuex'
export default{
  name: 'Home',
  data () {
    return {
      'lastCity': '',
      'swiperList': [],
      'iconList': [],
      'recommendList': [],
      'weekendList': []
    }
  },
  components: {
    HomeHeader, // ES6中键和值一样时可以省略其中一个
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json?city=' + this.city).then(result => {
        console.log(result)
        result = result.data
        if (result.ret && result.data) {
          var data = result.data
          this.city = data.city
          this.swiperList = data.swiperList
          this.iconList = data.iconList
          this.recommendList = data.recommendList
          this.weekendList = data.weekendList
        }
        console.log(this.city)
      }, err => {
        console.log(err.message)
      })
    }
  },
  mounted () {
    // console.log(this.city)
    this.lastCity = this.city
    this.getHomeInfo()
  },
  computed: {
    ...mapState(['city'])
  },
  activated () {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
    // console.log('activated')
  }
}
</script>
<style scoped>
</style>
